<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>烘焙蛋糕</title>
    <script src="js/jquery-3.3.1.js"></script>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <div class="container ">
        <div class="left">
            <div class="logo ">
                <div >
                    <img src="images/logo.png" alt="">
                </div>
                <div class="hongbei">
                    <h>烘焙+</h>
                    <p>hongbei</p>
                </div>
            </div>
            <div class="user">
                <p><img src="images/user.png"><span>黑侠（光谷店）</span></span></p>
                <p><img src="images/clock.png"><span>2016-04-06 &nbsp;&nbsp;10:24&nbsp;&nbsp;AM</span></span></p>
               
            </div>
            <div class="money">
                <p><img src="images/mingxi.png"><span>收支明细</span></span></p>                
            </div>
            <div class="list">
                <div class="menu">
                    <img src="images/left1.png" alt="">
                    <img src="images/left2.png" alt="">  
                    <img src="images/left3.png" alt="">  
                    <img src="images/left4.png" alt="">  
                    <img src="images/left5.png" alt="">  
                    <img src="images/left6.png" alt="">  
                    <img src="images/left7.png" alt="">  
                      
                </div>
                <div>
                    <table>
                        <tr>
                            <th>品名</th>
                            <th>数量</th>
                            <th>金额</th>
                            <th>结算价</th> 
                            <th>&nbsp;</th>
                        </tr>
                        <tr>
                            <td>蛋挞</td>
                            <td>5</td>
                            <td>60</td>
                            <td>60</td>                             
                            <td>&nbsp;</td>

                        </tr>
                        <tr>
                            <td>全麦面包</td>
                            <td>1</td>
                            <td>10.5</td>
                            <td>10.5</td> 
                            <td>&nbsp;</td>
                        </tr>
                        <tr>
                            <td class="three">威风蛋糕</td>
                            <td>1</td>
                            <td>20</td>
                            <td>0</td> 
                            <td>&nbsp;</td>
                        </tr>
                        <tr>
                            <td>三明治</td>
                            <td>5</td>
                            <td>60</td>
                            <td>60</td> 
                            <td>&nbsp;</td>
                        </tr>
                    </table>
                </div>
                <div class="list-b">
                    <div class="allmoney">
                        <span>总额：</span>
                        <span>￥125.5</span>
                    </div>
                    <div class="search">
                        <input placeholder="搜索商品">
                        <img src="images/clear.png" alt="">
                        <input class="button"/>
                    </div>
                </div>
            </div>
            <div class="l-foot">
                <p>会员信息：</p>
            </div>
            
        </div>
        <div class="right">
            <div class="logo"></div>
            <ul>
                <li class="one">威风蛋糕</li>
                <li>蛋挞</li>
                <li>全麦面包</li>
                <li>戚风蛋糕</li>
                <li>三明治</li>
                <li class="aa"></li>
            </ul>
            <div class="display">
                <div>
                <div class="goods">
                    <div >
                        <img src="images/huodong.png">
                        <h>0001</h>
                        <p>巧克力蛋糕</p>
                    </div>
                    <div class="two">
                        <h>0001</h>
                        <p>巧克力蛋糕</p>
                    </div>
                    <div >
                        <h>0001</h>
                        <p>巧克力蛋糕</p>
                    </div>
                    <div >
                        <h>0001</h>
                        <p>巧克力蛋糕</p>
                    </div>
                    <div >
                        <h>0001</h>
                        <p>巧克力蛋糕</p>
                    </div>
                </div>
                </div>
                <div>
                <div class="goods">
                    <div >
                        <img src="images/huodong.png">
                        <h>0002</h>
                        <p>巧克力蛋糕</p>
                    </div>
                    <div class="two">
                        <h>0002</h>
                        <p>巧克力蛋糕</p>
                    </div>
                    <div >
                        <h>0002</h>
                        <p>巧克力蛋糕</p>
                    </div>
                    <div >
                        <h>0002</h>
                        <p>巧克力蛋糕</p>
                    </div>
                    <div >
                        <h>0002</h>
                        <p>巧克力蛋糕</p>
                    </div>
                </div>
                </div>
                <div>
                    <div class="goods">
                        <div >
                            <img src="images/huodong.png">
                            <h>0003</h>
                            <p>巧克力蛋糕</p>
                        </div>
                        <div class="two">
                            <h>0003</h>
                            <p>巧克力蛋糕</p>
                        </div>
                        <div >
                            <h>0003</h>
                            <p>巧克力蛋糕</p>
                        </div>
                        <div >
                            <h>0003</h>
                            <p>巧克力蛋糕</p>
                        </div>
                        <div >
                            <h>0003</h>
                            <p>巧克力蛋糕</p>
                        </div>
                    </div>
                </div>
                <div>
                    <div class="goods">
                        <div >
                            <img src="images/huodong.png">
                            <h>0004</h>
                            <p>巧克力蛋糕</p>
                        </div>
                        <div class="two">
                            <h>0004</h>
                            <p>巧克力蛋糕</p>
                        </div>
                        <div >
                            <h>0004</h>
                            <p>巧克力蛋糕</p>
                        </div>
                        <div >
                            <h>0004</h>
                            <p>巧克力蛋糕</p>
                        </div>
                        <div >
                            <h>0004</h>
                            <p>巧克力蛋糕</p>
                        </div>
                    </div>
                </div>
                <div>
                    <div class="goods">
                        <div >
                            <img src="images/huodong.png">
                            <h>0005</h>
                            <p>巧克力蛋糕</p>
                        </div>
                        <div class="two">
                            <h>0005</h>
                            <p>巧克力蛋糕</p>
                        </div>
                        <div >
                            <h>0005</h>
                            <p>巧克力蛋糕</p>
                        </div>
                        <div >
                            <h>0005</h>
                            <p>巧克力蛋糕</p>
                        </div>
                        <div >
                            <h>0005</h>
                            <p>巧克力蛋糕</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="r-foot"> 
                <div >
                    <img src="images/foot1.png">
                    <p>控制台</p>
                </div>
                <div >
                    <img src="images/foot2.png">
                    <p>购物卡</p>
                </div>
                <div >
                    <img src="images/foot3.png">
                    <p>会员</p>
                </div>
                <div >
                    <img src="images/foot4.png">
                    <p>促销</p>
                </div>
                <div >
                    <img src="images/foot5.png">
                    <p>预定</p>
                </div>
                <div >
                    <img src="images/foot6.png">
                    <p>交班</p>
                </div>
                <div >
                    <img src="images/foot7.png">
                    <p>挂单</p>
                </div>
                <button ><img src="images/qiandai.png">收银</button>

            </div>            
        </div>
    </div>
    <script>
        $(function(){
            $(".right ul li").click(function(){
                $(this).addClass("one").siblings().removeClass("one");
                $(".display>div").eq($(this).index()).show().siblings().hide();
            })
            $(".goods div").click(function(){
                $(this).addClass("two").siblings().removeClass("two");
            })
        })
    </script>
</body>
</html>